<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- push可以在数组的末尾添加一个或者多个元素, 并返回新的长度
        注意:这个方法会改变数组的长度
            新元素将添加在数组的末尾
        语法:array.push("元素1","元素二")
    -->
    <p id="demo">点击按钮给数组添加新的元素:</p>
    <button onclick="myFunction()">点我</button>
    <script>
        var fruits = ["苹果", "梨子", "香蕉"];

        function myFunction() {
            fruits.push("添加一个苹果");
            var x = document.getElementById("demo");
            x.innerHTML = fruits;
            console.log("数组长度:" + fruits.length);
        }
    </script>

    <!-- unshift以在数组的首位添加一个或者多个元素, 并返回新的长度
        注意:这个方法会改变数组的长度
            新元素将添加在数组的末尾
        语法:array.unshitf("元素1","元素二") -->
    <p id="demo1">点击在数组首位插入元素</p>
    <button type="button" onclick="myFunction1()"> 点击</button>

    <script>
        var fruits1 = ["苹果", "梨子", "香蕉"];

        function myFunction1() {
            fruits1.unshift("添加一个苹果");
            var x = document.getElementById("demo1");
            x.innerHTML = fruits1;
            console.log("数组长度:" + fruits1.length)
        }
    </script>
    <!-- 比上面两个更强大的方法:splice()用于插入删除或者替换数组的元素
        此方法会改变数组的长度
        语法:array.splice(index:必填,规定从何处添加/删除元素,该参数是开始插入和(或)删除的数组元素的下标,必须是数字.
        howmany:必填.规定应该删除多少元素,必须是整数,也可以是0.如果未规定参数,则删除从index开始到原数组结尾的所有元素
        item,...itemN:可填,要添加数组的元素)
    -->

    <!-- w3c实例1 -->
    <p id="demo2">点击按钮添加和删除元素</p>
    <button type="button" onclick="myFunction2()">点我</button>
    <script>
        function myFunction2() {
            var fruits2 = [1, 2, 3, 4, 5, 6];
            fruits2.splice(2, 3, "这里是增加的元素");
            var x = document.getElementById("demo2");
            x.innerHTML = fruits2;
            console.log("以前的数组长度为5,现在为" + fruits2.length)
        }
    </script>




</body>

</html>